/**
 * @fileoverview Formily Shadcn/UI Input 组件
 * 
 * ⚠️ 警告：当前实现存在严重的架构问题！
 * 
 * 这个文件展示了 formily-shadcn 项目中的典型问题：
 * 1. ❌ 使用 `as any` 进行简单类型转换，缺少 Formily 集成
 * 2. ❌ 没有使用 connect 函数进行状态映射
 * 3. ❌ 缺少字段验证状态显示
 * 4. ❌ 缺少加载状态处理
 * 5. ❌ 缺少只读模式支持 (mapReadPretty)
 * 
 * 正确的实现应该：
 * ```typescript
 * import { connect, mapProps, mapReadPretty } from '@formily/react'
 * 
 * export const Input = connect(
 *   ShadcnInput,
 *   mapProps((props, field) => ({
 *     ...props,
 *     disabled: field?.disabled,
 *     className: cn(
 *       field?.errors?.length > 0 && "border-destructive",
 *       props.className
 *     )
 *   })),
 *   mapReadPretty(PreviewText.Input)
 * )
 * ```
 * 
 * 当前实现仅适用于演示，不应在生产环境中使用。
 */

import React from 'react'
import { createBehavior, createResource } from '@bill_law6/designable-core'
import { DnFC } from '@bill_law6/designable-react'
import { Input as ShadcnInput } from '../../ui/input'
import { Textarea } from '../../ui/textarea'
import { createFieldSchema } from '../Field'
import { AllSchemas } from '../../schemas'
import { AllLocales } from '../../locales'

/**
 * Input 组件属性接口
 * 
 * 继承 Shadcn/UI Input 组件的所有属性
 */
export interface InputProps extends React.ComponentProps<typeof ShadcnInput> {}

/**
 * ❌ 问题实现：Input 组件
 * 
 * 当前使用简单的类型转换，缺少必要的 Formily 集成：
 * - 无状态映射：不能响应字段状态变化
 * - 无验证显示：不能显示验证错误
 * - 无只读模式：不支持预览模式
 * - 无加载状态：不能显示异步操作状态
 */
export const Input: DnFC<InputProps> & {
  TextArea: DnFC<React.ComponentProps<typeof Textarea>>
} = ShadcnInput as any

/**
 * ❌ 问题实现：TextArea 子组件
 * 
 * 同样使用简单类型转换，存在相同的集成问题
 */
Input.TextArea = Textarea as any

Input.Behavior = createBehavior(
  {
    name: 'Input',
    extends: ['Field'],
    selector: (node) => node.props['x-component'] === 'Input',
    designerProps: {
      propsSchema: createFieldSchema(AllSchemas.Input),
    },
    designerLocales: AllLocales.Input,
  },
  {
    name: 'Input.TextArea',
    extends: ['Field'],
    selector: (node) => node.props['x-component'] === 'Input.TextArea',
    designerProps: {
      propsSchema: createFieldSchema(AllSchemas.Input.TextArea),
    },
    designerLocales: AllLocales.TextArea,
  }
)

Input.Resource = createResource(
  'Inputs',
  {
    icon: 'InputSource',
    elements: [
      {
        componentName: 'Field',
        props: {
          type: 'string',
          title: 'Input',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
      },
    ],
  },
  {
    icon: 'TextAreaSource',
    elements: [
      {
        componentName: 'Field',
        props: {
          type: 'string',
          title: 'TextArea',
          'x-decorator': 'FormItem',
          'x-component': 'Input.TextArea',
        },
      },
    ],
  }
)